import React, { Component } from "react";
import { Carousel } from "antd-mobile";
import { NavBar, Popover, Icon } from "antd-mobile";
import "./index.scss";
const Item = Popover.Item;
class PrivateCarousel extends Component {
  state = {
    imgHeight: 176,
  };
  componentDidMount() {}
  render() {
    const { houseImg, partName } = this.props;

    return (
      <div className="privateCarouselWrapper">
        <div className="topBar">
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => {
              this.props.goBack();
            }}
            // rightContent={[<span className="iconfont icon-fenxiang1" />]}
            rightContent={
              <Popover
                mask
                overlayClassName="fortest"
                overlayStyle={{ color: "currentColor" }}
                visible={this.state.visible}
                overlay={[
                  <Item
                    key="4"
                    value="scan"
                    data-seed="logId"
                    icon={<span className="iconfont icon-xin"></span>}
                  >
                    喜欢
                  </Item>,
                  <Item
                    key="5"
                    value="special"
                    icon={<span className="iconfont icon-jubao"></span>}
                    style={{ whiteSpace: "nowrap" }}
                  >
                    举报
                  </Item>,
                  <Item
                    key="6"
                    value="button ct"
                    icon={<span className="iconfont icon-icon-test"></span>}
                  >
                    <span style={{ marginRight: 5 }}>分享</span>
                  </Item>,
                ]}
                align={{
                  overflow: { adjustY: 0, adjustX: 0 },
                  offset: [-10, 0],
                }}
                onVisibleChange={this.handleVisibleChange}
                onSelect={this.onSelect}
              >
                <div
                  style={{
                    height: "100%",
                    padding: "0 15px",
                    marginRight: "-15px",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <Icon type="ellipsis" />
                </div>
              </Popover>
            }
          >
            {partName}
          </NavBar>
        </div>
        <Carousel
          className="carousel"
          autoplay={false}
          infinite
          beforeChange={(from, to) => {}}
          afterChange={(index) => {}}
        >
          {houseImg && houseImg.length >= 1 ? (
            houseImg.map((val) => (
              <img
                src={`http://localhost:8080${val}`}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            ))
          ) : (
            <div></div>
          )}
        </Carousel>
      </div>
    );
  }
}

export default PrivateCarousel;
